import Taro, {Component} from '@tarojs/taro'
import {View, Image} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import * as actions from '../../actions/product'
import './index.scss'

@connect(state => state.product, {...actions})
class Masonry extends Component {
  constructor(props) {
    super(props)
  }

  static options = {
    addGlobalClass: true
  }

  state = {
    mediaList2: [],
    suffix: '?imageInfo',
    list: [],
    heightArr: []
  }

  config = {
    navigationBarTitleText: ''
  }

  componentWillMount() {
  }

  async componentDidMount() {

  }

  getBoxWidth() {
    Taro.createSelectorQuery().in(this.$scope).select('#fall').boundingClientRect(rects => {

    }).exec()
  }


  componentDidShow() {
    // let {mediaList2} = this.state
    // Taro.createSelectorQuery().in(this.$scope).select('#fall').boundingClientRect(
    //   async (rects)=>{
    //     let {list,heightArr,suffix} = this.state
    //     let col = 2
    //     for (let i = 0; i < col; i++) {
    //       list[i] = new Array(Math.floor(mediaList2.length / 2))
    //     }
    //     for (let i in mediaList2) {
    //       // mediaList2[i].cover = mediaList2[i].url.replace('-qianyouzhuo','') + suffix
    //       const {width,height,url} = mediaList2[i]
    //       // mediaList2[i].height = rects.width/col / width * height
    //       let info = await this.fetchPicInfo(mediaList2[i].url.replace('-qianyouzhuo','') + suffix)
    //       console.log('图片信息',mediaList2[i].url)
    //       mediaList2[i].height = 165 / info.width * info.height
    //       // mediaList2[i].height = rects.width/col / info.width * info.height
    //       if (i < col) {
    //         list[i][0] = mediaList2[i]
    //         heightArr.push(mediaList2[i].height)
    //       } else {
    //         let minHeight = Math.min.apply(null, heightArr)
    //         let minHeightIndex = heightArr.indexOf(minHeight)
    //         console.log('xxxxxxxxxxxx', minHeightIndex)
    //         let index = list[minHeightIndex].filter(Boolean).length
    //         list[minHeightIndex][index] = mediaList2[i]
    //         heightArr[minHeightIndex] += mediaList2[i].height
    //       }
    //     }
    //     for (let i = 0; i < col; i++) {
    //       list[i] = list[i].filter(Boolean)
    //     }
    //     console.log('mediaList2', list)
    //     this.setState({
    //       list
    //     })
    //   }
    // )
    // .exec();

  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  render() {
    const {mediaList} = this.props
    console.log('mediaList', mediaList)
    return (
      <View class="fall" id="fall">
        {
          mediaList.map(column => (
            <View class="fall-column" key={column.id}>
              {
                column.map(item => (
                  <View class="fall-column-item" key={item.id}>
                    <Image class="fall-column-item-img" lazyLoad={true} src={item.url} mode="widthFix"
                           onClick={this.jump.bind(this, item.id)} lazyLoad webp/>
                  </View>
                ))
              }
            </View>
          ))
        }
      </View>
    )
  }

  async fetchPicInfo(url) {
    return Taro.request({
      url,
      method: 'GET',
      header: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    }).then(async (res) => {
      return res.data
    })
  }

  jump(id) {
    Taro.navigateTo({
      url: `/pages/detail/index?id=${id}`
    })
  }

}

export default Masonry
